import React, { useEffect, useState } from 'react'
import { Button, Table, message, Modal, Input } from 'antd';

import styles from './index.module.css'

import { getAllcronExpression, creatCron } from '../../utils/axiosRequest/api'

//列
import { columns } from '../../constant/cronExpressionColumn'


function EditExpression(props) {
    //消息提示
    const [messageApi, contextHolder] = message.useMessage();
    //表格展示数据
    const [showDataSource, setDataSource] = useState([]);
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [load, setLoad] = useState(true);
    const [confirmLoading, setConfirmLoading] = useState(false);
    const [userCronId, setUserCronId] = useState('')
    const [userCron, setUserCron] = useState('')
    const [userCronDes, setUserCronDes] = useState('')

    //父控件传过来的值
    const { } = props;

    //[]空数组相当于componentDidMount
    useEffect(() => {
        initData()
        //返回的函数相当于unmountComponentAtNode
        return () => {

        }
    }, []);

    function initData() {
        const params = new Map()
        getAllcronExpression(params)
            .then(response => {
                const data = response.data
                if (data.code === '000') {
                    handleData(data.data)
                } else {
                    //处理失败
                    messageApi.open({ type: 'error', content: data.des });
                }
                setLoad(false)
            })
            .catch(error => {
                messageApi.open({ type: 'error', content: error.message });
                setLoad(false)
            });
    }

    function handleData(cronExpressionList) {
        const tempData = [];
        const length = cronExpressionList.length;
        for (let i = 0; i < length; i++) {
            tempData.push({
                key: i,
                serial: i + 1,
                id: cronExpressionList[i].id,
                cronExpression: cronExpressionList[i].cronExpression,
                cronDesc: cronExpressionList[i].description,
                taskState: cronExpressionList[i],//把整个task传递
            })
        }
        //排序->降序
        tempData.sort((a, b) => b.taskId - a.taskId)
        //保存全量案件数据
        setDataSource(tempData)
    }


    function handleOk() {
        setConfirmLoading(true)
        const params = new Map()
        params.set('cronExpressionId', userCronId)
        params.set('cronExpression', userCron)
        params.set('description', userCronDes)
        creatCron(params)
            .then(response => {
                const data = response.data
                if (data.code === '000') {
                    messageApi.open({ type: 'success', content: "创建成功" });
                    setIsModalOpen(false);
                    cearUseInpu()
                    initData()
                } else {
                    //处理失败
                    messageApi.open({ type: 'error', content: data.des });
                }
                setConfirmLoading(false)
            })
            .catch(error => {
                setConfirmLoading(false)
                messageApi.open({ type: 'error', content: error.message });
            });
    };

    function cearUseInpu() {
        setUserCronId('');
        setUserCron('');
        setUserCronDes('');
    }

    function handleCancel() {
        setIsModalOpen(false);
        cearUseInpu()
    };
    function creatTask() {
        setIsModalOpen(true);
    };

    function onChangeUserCronId(val) {
        let userCronId = val.target.value
        setUserCronId(userCronId);
    };

    function onChangeUserCron(val) {
        let userCron = val.target.value
        setUserCron(userCron);
    };

    function onChangeUserCronDes(val) {
        let userCronDes = val.target.value
        setUserCronDes(userCronDes);
    };



    return (
        <div className={styles.root}>
            {contextHolder}
            <Table loading={load} title={() => {
                return (
                    <div className={styles.head_box}>
                        <Modal confirmLoading={confirmLoading} loading={false} width={'40vw'} title="创建CRON表达式" open={isModalOpen} okText="创建" cancelText="取消" onOk={handleOk} onCancel={handleCancel}>
                            <div className={styles.modal_box}>
                                <p>表达式id:</p><Input onChange={onChangeUserCronId} value={userCronId} defaultValue={''} placeholder="请输入id..." variant="filled" />
                                <p>CRON: </p><Input onChange={onChangeUserCron} value={userCron} defaultValue={''} placeholder="请输入CRON..." variant="filled" />
                                <p>表达式描述: </p><Input onChange={onChangeUserCronDes} value={userCronDes} defaultValue={''} placeholder="请描述该表达式..." variant="filled" />
                            </div>
                        </Modal>
                        <Button onClick={creatTask} variant="outlined" color="primary" size={'middle'} >创建表达式</Button>
                    </div>
                )
            }} size={'middle'}
                pagination={{ showSizeChanger: false, pageSize: '7', position: ['bottomCenter'], defaultCurrent: '1', total: showDataSource.length }}
                bordered={true} dataSource={showDataSource} columns={columns} scroll={{ x: 100 }} />

        </div>
    )
}


export default EditExpression

